<template>
	<view class="collect-container">
		<view class="header flex justify-between align-center bg-white" v-if="list.length > 0">
			<view class="left">
				<view class="info flex justify-start align-center">
					<text>{{list[currentIndex].name}}</text>
					<text>{{list[currentIndex].relation_txt}}</text>
				</view>
				<text>{{list[currentIndex].id_no}}</text>
			</view>
			<view class="right flex flex-direction align-center" @tap="modalName = 'menu'">
				<text class="iconfont icon-qiehuanyonghu"></text>
				<text>切换就诊人</text>
			</view>
		</view>
		<!-- 主体 -->
		<!-- <wanl-scroll-list ref="list" :option="{ page: 1, auto: false }" @load="load($event,'load')" @refresh="load($event,'refresh')"> -->
			<view class="collect-container__main">
				<view class="content">
					<view v-for="(item, footprint) in formatData(dataList)" :key="footprint">
						<view class="wanl-gray text-lg margin-sm">
							{{ item.uploadtime }}
						</view>
						<view class="box">
							<view class="item" v-for="(goods, index) in item.data" :key="index">
								<image @tap="$wanlshop.previewImage(item.data.map(d=>{return d.full_url}), index)"
									:src="$wanlshop.oss(goods.url, 136, 126)" mode="aspectFill"></image>
								<!-- <text>{{$wanlshop.timeFormat(goods.uploadtime,'yyyy-mm-dd hh:MM:ss')}}</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		<view v-if="dataList.length == 0">
			<wanl-empty />
		</view>
		<!-- </wanl-scroll-list> -->
		<fa-add-ask type="custom" @custom="custom" icon="plus" :icon-style="{ color: theme.color }" :custom-style="{ backgroundColor: theme.bgColor }"></fa-add-ask>
		
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="() => {}">
			<view class="cu-modal bottom-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content"><view class="text-lg">选择就诊人</view></view>
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						<scroll-view class="wanl-coupon scroll-y" scroll-y="true" style="height: 700rpx;">
							<view v-for="(item,index) in list" :key="index" class="header flex justify-between align-center padding-lr-xs padding-tb-sm" style="border-bottom: 1rpx solid rgba(182,182,182,0.5);" @tap="changeUser(index)">
								<view class="left">
									<view class="info flex justify-start align-center">
										<text>{{item.name}}</text>
										<text>{{item.relation_txt}}</text>
									</view>
									<text>{{item.idcard}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" height="600rpx" border-radius="20">
			<view class="wanl-feedback padding-top-sm">
				<view class="bg-white padding-lr title margin-bottom-xs">
				    <text>上传{{text}}</text>
				</view>
				<!-- <view class="bg-white padding-lr title margin-bottom-xs"  @tap="$wanlshop.to(`/pages/user/record/treatment/treatment?source=5&order_id=${category_id}`)">
				    <text>选择我的家人</text>
				</view> -->
				<view class="cu-form-group" v-if="family_id">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(image,index) in images" :key="index">
						 <image :src="image" @tap="previewImage(images, index)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="close(index)">
								<text class='wlIcon-shanchu2'></text>
							</view>
						</view>
						<view style="border: 1px dashed #c5c5c5;" @tap="chooseImg">
							<text class="wlIcon-31paishe"></text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				dataList: [],
				category_id: '',
				text:'',
				show: false,
				images: [],
				family_id:'',
				modalName:'',
				list:[],
				
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
			};
		},
		onLoad(option) {
			this.getVisitor()
			this.category_id = option.id
			this.text = option.title;
			uni.setNavigationBarTitle({
				title: option.title
			})
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.load();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.load();
			}
		},
		methods: {
			changeUser(index) {
				this.currentIndex = index
				this.modalName = null
				this.current_page = 1;
				this.reload = true;
				this.load()
			},
			async getVisitor() {
				await uni.request({
					url: '/member/family/lists',
					method: 'POST',
					data: {
						limit:100
					},
					success: res => {
						this.list = res.data.data;
						
						this.current_page = 1;
						this.reload = true;
						this.load()
					}
				});
			},
			hideModal(name) {
				this.modalName = null;
			},
			setUsers(value) {
				this.family_id = value
				this.show = true
			},
			load(paging, key) {
				uni.request({
					url: '/member/user/getUploadImages',
					data: {
						category_id: this.category_id,
						page: this.current_page,
						page_size: 30,
						family_id: this.list[this.currentIndex].id
					},
					success: res => {
						// let dataList = res.data.data
						// console.log(res.data)
						// if (key == 'load') {
						// 	this.dataList = [...this.dataList, ...dataList];
						// 	this.$refs.list.loadSuccess({
						// 		list: this.dataList,
						// 		total: res.data.total
						// 	});
						// } else if (key == 'refresh') {
						// 	this.dataList = dataList;
						// 	this.$refs.list.refreshSuccess({
						// 		list: dataList,
						// 		total: res.data.total
						// 	});
						// }
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			formatData(data) {
				let newArr = {}
				let list = [];
				data.map(res => {
					res.show = false
					newArr[this.$moment(res.uploadtime * 1000).format('YYYY-MM-DD')] = newArr[this.$moment(res
						.uploadtime * 1000).format('YYYY-MM-DD')] || [];
					newArr[this.$moment(res.uploadtime * 1000).format('YYYY-MM-DD')].push(res);
				})
				Object.keys(newArr).forEach(v => {
					let obj = {};
					obj.uploadtime = v;
					obj.data = newArr[v]
					list.push(obj);
				})
				return list;
			},
			custom() {
				this.$wanlshop.to(`/pages/user/record/treatment/treatment?source=5&order_id=${this.category_id}`);
			},
			chooseImg() { //选择图片
			    uni.chooseImage({
			        sourceType: ["camera", "album"],
			        sizeType: "compressed",
			        count: 1,
			        success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											let formData = updata.data.storage == 'local' ? null : updata.data.multipart;
											formData.family_id = this.family_id
											formData.category_id = this.category_id
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: formData,
												success: data => {
													this.images.push(JSON.parse(data.data).data.fullurl);
													this.show = false
													
													this.current_page = 1;
													this.reload = true;
													this.load()
												},
												fail: error =>{
													this.$wanlshop.msg(JSON.parse(error.data).msg);
												}
											});
										}
									});
								}
							}
						});
			        }
			    })
			},
			
			
			close(e){
			    this.images.splice(e,1);
			},
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.collect-container {
		&__head {
			.navigater {
				position: relative;

				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9;

					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}

		&__main {
			position: relative;
			z-index: 9;

			.content {
				height: 100%;

				.box {
					padding: 0 20rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						// height: 220rpx;
						width: calc((100% - 40rpx) / 3);
						margin-bottom: 20rpx;
						border-radius: 10rpx;
						overflow: hidden;
						> text {
							display: inline-block;
							height: 44rpx;
							line-height: 44rpx;
						}
						&:nth-child(3n-1) {
							margin-left: 20rpx;
							margin-right: 20rpx;
						}

						image {
							height: 220rpx;
							width: 100%;
							border-radius: 10rpx;
							box-shadow: 0px 2px 11px rgba(0, 0, 0, .1) !important;
						}

						.right {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: calc(100% - 220rpx);
						}
					}
				}
			}
		}
	}
	.wanl-modal {
		padding-bottom: env(safe-area-inset-bottom) !important;
		.wanl-coupon.scroll-y {
			height: 50%;
			padding-bottom: 0 !important;
		}
		.items {
			margin: 20rpx 0;
			> text {
				display: inline-block;
				text-align: center;
				width: 100%;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 14rpx;
			}
			.list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				text {
					display: inline-block;
					width: 160rpx;
					height: 60rpx;
					background: #F4F4F4;
					border-radius: 10rpx;
					margin-bottom: 16rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #555555;
					
					&.cur {
						background: #E9F4EB;
						color: #4CBD66;
					}
				}
			}
		}
	}
	.header {
		padding: 20rpx 28rpx 20rpx 38rpx;
		.left {
			.info {
				text {
					&:nth-child(1) {
						height: 48rpx;
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 48rpx;
					}
					&:nth-child(2) {
						height: 28rpx;
						background: #E9F4EB;
						border-radius: 18rpx;
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #4CBD66;
						line-height: 28rpx;
						padding: 0 10rpx;
						margin-left: 10rpx;
					}
				}
			}
			> text {
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				line-height: 36rpx;
			}
		}
		.right {
			text {
				&:nth-child(1) {
					color: #4CBD66;
					font-size: 40rpx;
				}
				&:nth-child(2) {
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #4CBD66;
					line-height: 28rpx;
				}
			}
		}
	}
</style>